<template>
	<div class="submitChaindetailss">
		<div class="submitChaindetails-headerss">质保信息</div>
		<div class="detailsbody">
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">客户姓名</div>
					<div class="detailsbody-flex-e">name</div>
				</div>
				<div class="detailsbody-flex-r">{{name}}</div>
			</div>
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">联系电话</div>
					<div class="detailsbody-flex-e">mobile</div>
				</div>
				<div class="detailsbody-flex-r">{{phone}}</div>
			</div>
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">汽车型号</div>
					<div class="detailsbody-flex-e">car model</div>
				</div>
				<div class="detailsbody-flex-r">{{version}}</div>
			</div>
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">车辆种类</div>
					<div class="detailsbody-flex-e">kind</div>
				</div>
				<div class="detailsbody-flex-r">{{type}}</div>
			</div>
			
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">车牌、发动机、车架号</div>
					<div class="detailsbody-flex-e">car engine construction</div>
				</div>
				<div class="detailsbody-flex-r" style="line-height: 70px;">{{licence_plate}}</div>
			</div>
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">施工单位</div>
					<div class="detailsbody-flex-e">unit</div>
				</div>
				<div class="detailsbody-flex-r">{{shop_name}}</div>
			</div>
			
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">施工地址</div>
					<div class="detailsbody-flex-e">site</div>
				</div>
				<div class="detailsbody-flex-r" style="line-height: 20px;">{{site}}</div>
			</div>
			
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">施工日期</div>
					<div class="detailsbody-flex-e">date</div>
				</div>
				<div class="detailsbody-flex-r">{{time}}</div>
			</div>
			
			
			<div class="detailsbody-flex" v-if="limited_times_text.length > 0">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">质保日期</div>
					<div class="detailsbody-flex-e">date</div>
				</div>
				<div class="detailsbody-flex-r" style="line-height:20px">{{limited_times_text[0]}}<br>{{limited_times_text[1]}}</div>
			</div>
			
			
			<div class="detailsbody-flex">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">施工项目</div>
					<div class="detailsbody-flex-e">project</div>
				</div>
				<div class="detailsbody-flex-r" style="line-height:20px">
					<div v-for="(item,index) in body">{{item.name}}</div>
				</div>
			</div>
			
			
			<div class="detailsbody-flex" v-if="remark1">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">金额</div>
					<div class="detailsbody-flex-e">money</div>
				</div>
				<div class="detailsbody-flex-r" style="line-height:20px">{{remark1}}</div>
			</div>
			
			
			<div class="detailsbody-flex" v-if="remark2">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">施工详情</div>
					<div class="detailsbody-flex-e">details</div>
				</div>
				<div class="detailsbody-flex-r" style="line-height:20px">{{remark2}}</div>
			</div>
			
			<div class="detailsbody-flex" v-if="remark3">
				<div class="detailsbody-flex-l">
					<div class="detailsbody-flex-n">备注</div>
					<div class="detailsbody-flex-e">remark</div>
				</div>
				<div class="detailsbody-flex-r" style="line-height:20px">{{remark3}}</div>
			</div>
			
		
			<div class="detailsbody-flex" v-if="imglists">
				<div class="detailsbody-flex-l" style="padding-top:35px">
					<div class="detailsbody-flex-n">施工照片</div>
					<div class="detailsbody-flex-e">photo</div>
				</div>
				<div class="detailsbody-flex-r">
					<img  class="img" :src="imglists"/>
				</div>
			</div>
			
		</div>	
			
			
			
			
		
	
		<div class="shop-button1" @click="quexiaoClick()">返回</div>
		<div style="height: 20px;"></div>
	</div>
</template>

<script>
	export default {
		
		 data() { 
			return {
				licence_plate : '',
				serialnumber: '',  
				site       : '',
				shop_name  : '',
				info       : {},
				body       : '',
				name       : '',  //姓名
				phone      : '', //手机号码
				time       : '', //质保日期
				status     : '',
				type  : '',
				limited_times_text : {},
				reason1 : '',
				reason: '',
				type_explain :'',  
				//-----------------------//
				version : '', //汽车型号
				//----------------------//
				remark1  : '',  //备注1
				remark2  : '', // 备注2
 				list  : [],
				imglists : ''
			}
	    },
		created() {
			var  query  = this.$route.query;
			this.licence_plate     = query.licence_plate;
			this.all();
		},
		methods:{
			
			quexiaoClick(){
				this.$router.push('/guarantee');
			},
			all(){
				let that = this;
				that.$http('get','/api/index/licence_plate',{'licence_plate':that.licence_plate}) .then(function (res) {
					if(res.code==1){
						that.name  = res.data.name;
						that.phone  = res.data.phone;
						that.time  = res.data.time;
						that.type  = res.data.type== 0 ? '桥车':'其他';
						that.type_explain  = res.data.type_explain;
						that.version  = res.data.version;
						that.licence_plate  = res.data.licence_plate;
						that.remark1  = res.data.remark1;
						that.remark2  = res.data.remark2;
						that.build_number  = res.data.build_number;
						that.body          = res.data.body;
						that.reason1       = res.data.reason1;
						that.reason        = res.data.reason;
						that.limited_times_text  = res.data.limited_times_text;
						that.imglists      = res.data.imglists;
						if(res.data.status==0){
							that.status  = '申请质保中';
						}else if(res.data.status==1){
							that.status  = '施工中心完成质保';
						}else if(res.data.status==2){
							that.status  = '施工中心拒绝质保'
						}else if(res.data.status==3){
							that.status  = '系统完成质保'
						}else if(res.data.status==4){
							that.status  = '系统拒绝质保'
						}
						console.log(that.body);
						that.serialnumber  = res.data.build_number;
						that.$http('get','/api/index/serialnumber',{'serialnumber':that.serialnumber}) .then(function (res) {
							that.site  = res.data.site;
							that.shop_name = res.data.name;
						})
						console.log(res);
					}else{
						Toast.fail(res.msg);return;
					}
				});
			},
			timeFormat(time) { // 时间格式化 2019-09-08
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let day = time.getDate();
				return year + '年' + month + '月' + day + '日'
			}
		}
	}
</script>

<style lang="less">
	.submitChaindetailss {
		width: 100%;
		min-height: 100%;
		background-image: url('../../assets/bag2.png');
		background-size: 100% 100%;
		.submitChaindetails-headerss {
			text-align: left;
			color: #fff;
			font-size: 17px;
			line-height: 46px;
			border-bottom: 1px solid #aaaaaa;
			padding-left: 15px;
			font-weight: bold;
			background-color: #000000;
		}
		.detailsbody {
			width: 80%;
			margin: auto;
			color: #fff;
			margin-top: 30px;
			
			.detailsbody-flex {
				display: flex;
				margin-bottom: 10px;
				.detailsbody-flex-l {
					width: 80px;
					.detailsbody-flex-n {
						font-size: 16px;
						text-align: right;
					}
					.detailsbody-flex-e {
						font-size: 14px;
						text-align: right;
					}
				}
				.detailsbody-flex-r {
					line-height: 39px;
					padding-left: 10px;
					width: 67%;
				}
			}
			.img {
				width: 67%;
				    height: 130px;
			}
			
		}	
		
	}
	
	.shop-button1 {
		width: 90%;
		    margin: auto;
		    margin-top: 30px;
		    text-align: center;
		    line-height: 42px;
		    color: #fff;
		    border-radius: 10px;
		    background-color: #3456b7;
		    font-size: 15px;
	}
</style>